<!doctype html>
<html lang="ch">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="大数据管理平台">
    <meta name="keywords" content="大数据管理平台 大数据">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>大数据管理平台</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/common.css"/>
    <link rel="stylesheet" type="text/css" href="css/slide.css"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/flat-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/jquery.nouislider.css">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div id="wrap">
    <!-- 左侧菜单栏目块 -->
    <div class="leftMeun" id="leftMeun">
        <div id="logoDiv">
            <p id="logoP">
                <img id="logo" alt="大数据管理平台" src="images/logo.png"><span>大数据管理平台</span>
            </p>
        </div>
        <div class="meun-item meun-item-active" href="javascript:;"
             onclick="gotoHDFS()" aria-controls="sour" role="tab"
             data-toggle="tab">
            <img src="images/icon_source.png">HDFS
        </div>
        <div class="meun-item meun-item-active" href="javascript:;"
             onclick="gotoSPARK()" aria-controls="sour" role="tab"
             data-toggle="tab">
            <img src="images/icon_source.png">SPARK
        </div>
        <div class="meun-item meun-item-active" href="javascript:;"
             onclick="gotoHive()" aria-controls="sour" role="tab"
             data-toggle="tab">
            <img src="images/icon_source.png">HIVE
        </div>
        <div class="meun-item meun-item-active" href="javascript:;"
             onclick="gotoHBASE()" aria-controls="sour" role="tab"
             data-toggle="tab">
            <img src="images/icon_source.png">HBASE
        </div>
        <div class="meun-item meun-item-active" href="javascript:;"
             onclick="gotoJDBC()" aria-controls="sour" role="tab"
             data-toggle="tab">
            <img src="images/icon_source.png">RDB
        </div>
        <div class="meun-item meun-item-active" href="javascript:;"
             onclick="gotoALL()" aria-controls="sour" role="tab"
             data-toggle="tab">
            <img src="images/icon_source.png">全部
        </div>
    </div>
    <!-- 右侧具体内容栏目 -->
    <div id="rightContent">
        <form id="configForm" name="configForm">
            <a class="toggle-btn" id="nimei"> <i
                    class="glyphicon glyphicon-align-justify"></i>
            </a>
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="sour">
                    <div class="check-div form-inline">
                        <h6 style="padding-top: 15px;">
                            <strong>参数配置</strong>
                        </h6>
                    </div>
                    <!--check-div-->
                    <div class="data-div">
                        <div class="row tableHeader"></div>
                        <div class="tablebody">
                            <div id="hdfs_config" class="block">
                                <div id="collapseSystem" class="collapse in"
                                     aria-expanded="true">
                                    <div class="row">
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                            <span>HDFS URL</span>
                                        </div>
                                        <div
                                                class="col-lg-3 col-md-3 col-sm-3 col-xs-3 form-group form-group-xs">
												<span><input type="text" class="form-control"
                                                             name="hdfsMasterUrl" id="hdfsMasterUrl"></span>
                                        </div>
                                        <div class="">
                                            <span>默认：hdfs://adhserver:9000</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="spark_config" class="block">
                                <div id="collapseSystem" class="collapse in"
                                     aria-expanded="true">
                                    <div class="row">
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                            <span>SPARK Master URL</span>
                                        </div>
                                        <div
                                                class="col-lg-3 col-md-3 col-sm-3 col-xs-3 form-group form-group-xs">
												<span><input type="text" class="form-control"
                                                             name="sparkMasterUrl" id="sparkMasterUrl"></span>
                                        </div>
                                        <div class="">
                                            <span>默认：spark://adhserver:7077</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="hive_config" class="block">
                                <div class="row">
                                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                        <span>Hive URL</span>
                                    </div>
                                    <div
                                            class="col-lg-3 col-md-3 col-sm-3 col-xs-3 form-group form-group-xs">
											<span><input type="text" class="form-control"
                                                         id="hiveConnStr" name="hiveConnStr"></span>
                                    </div>
                                    <div class="">
                                        <span>默认：jdbc:hive2://adhserver:10000/default</span>
                                    </div>

                                </div>
                                <div id="collapseSystem" class="collapse in"
                                     aria-expanded="true">
                                    <div class="row">
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                            <span>Hive的用户名</span>
                                        </div>
                                        <div
                                                class="col-lg-3 col-md-3 col-sm-3 col-xs-3 form-group form-group-xs">
												<span><input type="text" class="form-control"
                                                             name="hiveConnUsr" id="hiveConnUsr"></span>
                                        </div>
                                    </div>
                                </div>
                                <div id="collapseSystem" class="collapse in"
                                     aria-expanded="true">
                                    <div class="row">
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                            <span>Hive的密码</span>
                                        </div>
                                        <div
                                                class="col-lg-3 col-md-3 col-sm-3 col-xs-3 form-group form-group-xs">
												<span><input type="text" class="form-control"
                                                             name="hiveConnPwd" id="hiveConnPwd"></span>
                                        </div>
                                    </div>
                                </div>
                                <div id="collapseSystem" class="collapse in"
                                     aria-expanded="true">
                                    <div class="row">
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                            <span>Hive的存放数据路径</span>
                                        </div>
                                        <div
                                                class="col-lg-3 col-md-3 col-sm-3 col-xs-3 form-group form-group-xs">
												<span><input type="text" class="form-control"
                                                             name="hiveWhDir" id="hiveWhDir"></span>
                                        </div>
                                        <div class="">
                                            <span>默认：hdfs上的/tmp/hive路径</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="hbase_config" class="block">
                                <div id="collapseSystem" class="collapse in"
                                     aria-expanded="true">
                                    <div class="row">
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                            <span>HBASE Master URL</span>
                                        </div>
                                        <div
                                                class="col-lg-3 col-md-3 col-sm-3 col-xs-3 form-group form-group-xs">
												<span><input type="text" class="form-control"
                                                             name="hbaseMaster" id="hbaseMaster"></span>
                                        </div>
                                        <div class="">
                                            <span>默认：adhserver:6000</span>
                                        </div>

                                    </div>
                                </div>
                                <div id="collapseSystem" class="collapse in"
                                     aria-expanded="true">
                                    <div class="row">
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                            <span>HBASE的外部Zookeeper连接信息</span>
                                        </div>
                                        <div
                                                class="col-lg-3 col-md-3 col-sm-3 col-xs-3 form-group form-group-xs">
												<span><input type="text" class="form-control"
                                                             name="hbaseZkpQu" id="hbaseZkpQu"></span>
                                        </div>
                                        <div class="">
                                            <span>默认：adhserver01,adhserver02,adhserver03</span>
                                        </div>
                                    </div>
                                </div>
                                <div id="collapseSystem" class="collapse in"
                                     aria-expanded="true">
                                    <div class="row">
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                            <span>HBASE的外部Zookeeper端口</span>
                                        </div>
                                        <div
                                                class="col-lg-3 col-md-3 col-sm-3 col-xs-3 form-group form-group-xs">
												<span><input type="text" class="form-control"
                                                             name="hbaseZkpPort" id="hbaseZkpPort"></span>
                                        </div>
                                        <div class="">
                                            <span>默认：2181</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="jdbc_config" class="block">
                                <div id="collapseSystem" class="collapse in"
                                     aria-expanded="true">
                                    <div class="row">
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                            <span>RDB（JDBC）的驱动</span>
                                        </div>
                                        <div
                                                class="col-lg-3 col-md-3 col-sm-3 col-xs-3 form-group form-group-xs">
												<span><input type="text" class="form-control"
                                                             name="jdbcConnDriver" id="jdbcConnDriver"></span>
                                        </div>
                                        <div class="">
                                            <span>参考：com.mysql.jdbc.Driver</span>
                                        </div>

                                    </div>
                                </div>
                                <div id="collapseSystem" class="collapse in"
                                     aria-expanded="true">
                                    <div class="row">
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                            <span>RDB（JDBC）的连接地址</span>
                                        </div>
                                        <div
                                                class="col-lg-3 col-md-3 col-sm-3 col-xs-3 form-group form-group-xs">
												<span><input type="text" class="form-control"
                                                             name="jdbcConnStr" id="jdbcConnStr"></span>
                                        </div>
                                        <div class="">
                                            <span>参考：jdbc:mysql://localhost:3306/ci?autoReconnect=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull</span>
                                        </div>
                                    </div>
                                </div>
                                <div id="collapseSystem" class="collapse in"
                                     aria-expanded="true">
                                    <div class="row">
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                            <span>RDB（JDBC）的用户名</span>
                                        </div>
                                        <div
                                                class="col-lg-3 col-md-3 col-sm-3 col-xs-3 form-group form-group-xs">
												<span><input type="text" class="form-control"
                                                             name="jdbcConnUsrName" id="jdbcConnUsrName"></span>
                                        </div>
                                    </div>
                                </div>
                                <div id="collapseSystem" class="collapse in"
                                     aria-expanded="true">
                                    <div class="row">
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                            <span>RDB（JDBC）的密码</span>
                                        </div>
                                        <div
                                                class="col-lg-3 col-md-3 col-sm-3 col-xs-3 form-group form-group-xs">
												<span><input type="text" class="form-control"
                                                             name="jdbcConnPwd" id="jdbcConnPwd"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!--数据管理-->
                            <div id="collapseAccount" class="collapse in"
                                 aria-expanded="true">
                                <div class="row">
                                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"></div>
                                    <span id="updateRow"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </form>

        <!--页码块-->
        <footer class="footer">
            <form role="form">
                <div class="form-group">
                    <button type="button" onclick="saveConfig()"
                            class="btn btn-yellow">保存并应用配置
                    </button>
                    <button type="button" onclick="getConfig()" class="btn btn-default"
                            id="reset">还原
                    </button>
                </div>
            </form>
        </footer>
    </div>
    <script type="text/javascript" src="js/jquery/jquery-1.9.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        $(function () {
            $(".meun-item").click(function () {
                $(".meun-item").removeClass("meun-item-active");
                $(this).addClass("meun-item-active");
                var itmeObj = $(".meun-item").find("img");
                itmeObj.each(function () {
                    var items = $(this).attr("src");
                    items = items.replace("_grey.png", ".png");
                    items = items.replace(".png", "_grey.png")
                    $(this).attr("src", items);
                });
                var attrObj = $(this).find("img").attr("src");
                ;
                attrObj = attrObj.replace("_grey.png", ".png");
                $(this).find("img").attr("src", attrObj);
            });
            getConfig();

        })

        function saveConfig() {
            var para = $("#configForm").serialize();
            var url = "./conf/config";
            $.ajax({
                type: "POST",
                async: true,
                data: para,
                url: url,
                success: function (data) {
                    alert(data);
                },
                error: function (data) {
                    alert(data);
                }
            })
        }

        function getConfig() {
            var url = "./conf/getConfig";
            $.ajax({
                type: "POST",
                async: true,
                url: url,
                success: function (data) {
                    for (var key in data) {
                        $("#" + key).val(data[key]);
                    }
                },
                error: function (data) {
                    alert(data);
                }
            })
        }

        function gotoHDFS() {
            var itmeObj = $(".block")
            itmeObj.each(function () {
                $(this).hide();
            });
            $("#hdfs_config").show();
        }
        function gotoSPARK() {
            var itmeObj = $(".block")
            itmeObj.each(function () {
                $(this).hide();
            });
            $("#spark_config").show();
        }
        function gotoHive() {
            var itmeObj = $(".block")
            itmeObj.each(function () {
                $(this).hide();
            });
            $("#hive_config").show();
        }
        function gotoHBASE() {
            var itmeObj = $(".block")
            itmeObj.each(function () {
                $(this).hide();
            });
            $("#hbase_config").show();
        }
        function gotoJDBC() {
            var itmeObj = $(".block")
            itmeObj.each(function () {
                $(this).hide();
            });
            $("#jdbc_config").show();
        }
        function gotoALL() {
            var itmeObj = $(".block")
            itmeObj.each(function () {
                $(this).show();
            });
        }
    </script>
</body>
</html>
